<script>
export default {
  props: ['data'],
  emits: ['submit'],
  data() {
    return {
      rules: {
        "bookName": [{ required: true, message: '内容不能为空', trigger: 'blur' },
        { type: 'string', max: 50, message: '不能大于50个字符', trigger: 'blur' }],
        "bookAuthor": [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        "bookISBN": [{ required: true, message: '内容不能为空', trigger: 'blur' },
        { type: 'string', min: 13, max: 13, message: '必须是13位', trigger: 'blur' }],
        "bookPress": [{ required: true, message: '内容不能为空', trigger: 'blur' },
        { type: 'string', max: 20, message: '不能大于20个字符', trigger: 'blur' }],
        "bookTotalNumber": [{ required: true, message: '内容不能为空', trigger: 'blur' }] // 总数量
      }
    }
  },
  methods: {
    btnClick() {
      this.$refs['rules'].validate((valid) => {
        if (valid) {
          // 验证通过
          this.$emit('submit', this.data)
        } else {
          // 验证失败
          return false;
        }
      })
    }
  }

}
</script>

<template>
  <el-form
    style="width: 50%;"
    :rules="rules"
    ref="rules"
    label-position="right"
    label-width="120px"
    :model="data"
  >
    <el-form-item label="图书名称" prop="bookName">
      <el-input v-model="data.bookName"></el-input>
    </el-form-item>
    <el-form-item label="作者" prop="bookAuthor">
      <el-input v-model="data.bookAuthor"></el-input>
    </el-form-item>
    <el-form-item label="ISBN" prop="bookISBN">
      <el-input v-model="data.bookISBN"></el-input>
    </el-form-item>
    <el-form-item label="出版社" prop="bookPress">
      <el-input v-model="data.bookPress"></el-input>
    </el-form-item>
    <el-form-item label="现存数量">
      <el-input-number
        size="small"
        v-model="data.bookExistingNumber"
        controls-position="right"
        :min="0"
        :max="100"
        disabled
      ></el-input-number>
    </el-form-item>
    <el-form-item label="总数量" prop="bookTotalNumber">
      <el-input-number
        size="small"
        v-model="data.bookTotalNumber"
        controls-position="right"
        :min="0"
        :max="100"
      ></el-input-number>
    </el-form-item>

    <el-form-item class="t-right">
      <el-button @click="btnClick" type="primary">保存修改</el-button>
    </el-form-item>
  </el-form>
</template>
